<template>
  <div class="login-box">
    <div class="login-img">
      <img src="../../assets/image/logo.png" alt="" />
    </div>
    <div class="login-head">
      <div
        class="login-head-item"
        v-for="item in state.loginList"
        :key="item.id"
        :class="state.headItem == item.id ? 'login-head-item-current' : ''"
        @click="CheckLoginRester(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="login-main">
      <div class="login-item">
        <input v-model="state.username" placeholder="请输入用户名" />
      </div>
      <div class="login-item">
        <input
          type="password"
          v-model="state.password"
          placeholder="请输入密码"
        />
      </div>
      <div class="login-item" v-if="state.headItem == 2">
        <input
          type="password"
          v-model="state.passwordSecond"
          placeholder="请再次输入密码"
        />
      </div>
    </div>
    <div class="submit-btn">
      <van-button
        type="primary"
        :loading="isLoading"
        @click="LoginRegister()"
        >{{ state.headItem == 1 ? "登录" : "注册" }}</van-button
      >
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

import { registerUser, loginUser } from "@/api/user.js";
import { showToast } from "vant";

const route = useRoute();
const router = useRouter();

const state = reactive({
  username: "",
  password: "",
  passwordSecond: "",
  loginList: [
    {
      id: 1,
      name: "登录",
    },
    {
      id: 2,
      name: "注册",
    },
  ],
  headItem: 1,
});

const CheckLoginRester = (item) => {
  state.headItem = item.id;
  router.push({
    name: route.name,
    query: {
      types: item.id,
    },
  });
};

let isLoading = ref(false);

const LoginRegister = async () => {
  let avatarList = [
    "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2Fdb871243760c4d908eb45c4fc2fb6e36_%E5%8A%A8%E7%89%A9%E5%A4%B4%E5%83%8F-09.png",
    "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F3633300bfb3b4d788d2bdb257aa2c277_%E5%8A%A8%E7%89%A9%E5%A4%B4%E5%83%8F-01.png",
    "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2Fd03fa23e177148e78f260c92ab04aa5d_79.png",
    "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F9c0b1cb4a8ea429599af15503b1876cf_PITAO-%E7%8B%BC.png",
    "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2F4a57b3b6b6c74488b16dbfea06d45aed_189.png",
    "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2Fba62feea531647198b59107da18789d5_%E5%8A%A8%E7%89%A9%E5%A4%B4%E5%83%8F-04.png",
    "https://dyimgoss.oss-cn-beijing.aliyuncs.com/app%2Fbase%2Fc378c8b6ebab4217948e23f9fe6f8a63_PITAO-%E6%A9%98%E7%8C%AB.png",
  ];
  isLoading.value = true;
  // 用户登录
  let { username, password, passwordSecond } = state;
  if (state.headItem == 1) {
    try {
      let params = {
        username,
        password,
      };
      let { data } = await loginUser(params);
      console.log(data, "data");
      if (data.id) {
        isLoading.value = false;
        localStorage.setItem("token", data.id);
        localStorage.setItem("userInfo", JSON.stringify(data));
        showToast("登录成功");
        router.push({
          name: "index",
        });
      }
    } catch (error) {
      isLoading.value = false;
    }
  } else {
    let _num = Math.floor(Math.random() * 7)
    let params = {
      username,
      password,
      passwordSecond,
      avatar:avatarList[_num]
    };
    try {
      let { data } = await registerUser(params);
      console.log(data, "data111");
      if (data.id) {
        isLoading.value = false;
        showToast("注册成功，请登录！");
        state.headItem = 1;
        router.push({
          name: route.name,
          query: {
            types: 1,
          },
        });
      }
    } catch (error) {
      isLoading.value = false;
    }
  }
};

onMounted(async () => {
  let { types } = route.query;
  state.headItem = types ? types : 1;
});
</script>

<style lang="scss" scoped>
.login-box {
  background: #fff;
  height: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
}
.login-head {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #e2e2e2;
  .login-head-item {
    margin: 0 20px;
    font-size: 24px;
    color: #999999;
    position: relative;
    padding-bottom: 10px;
    &::before {
      position: absolute;
      width: 100%;
      content: "";
      height: 4px;
      bottom: 0;
      left: 0;
    }
  }
  .login-head-item-current {
    color: $default-color;
    // font-size: 28px;
    // font-weight: bold;
    &::before {
      background: $default-color;
    }
  }
}

.login-main {
  margin-top: 50px;
}
.login-item {
  margin: 10px 30px;
  input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    border-radius: 0 !important;
    background: #fff;
    padding: 0 20px;
  }
}
.submit-btn {
  margin: 30px 50px;
  .van-button {
    background: $default-color;
  }
}
.login-img {
  margin: 5vh 0;
  display: flex;
  justify-content: center;
}
</style>
